<template>
    <div class="downList">
        <ul>
            <li v-for="(item,key) in tabBarImg" :key="key"  @click="switchToTab(item.path)">
                <router-link :to="item.path">
                    <img :src="$route.path === item.path ? item.icon : item.normal" alt="" ><br>
                    <span :class="$route.path === item.path ? 'active' : ''">{{item.title}}</span>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "downList",
        data(){
            return{
                tabBarImg:[
                    {
                        path:'/position/map',
                        normal:require('../../assets/downImg/1_g.png'),
                        icon:require('../../assets/downImg/1.png'),
                        title:'首页',
                    },
                    {
                        path:'/position/firstPage',
                        normal:require('../../assets/downImg/2_g.png'),
                        icon:require('../../assets/downImg/2.png'),
                        title:'打卡',
                    },
                    {
                        path:'/position/myPage',
                        normal:require('../../assets/downImg/3_g.png'),
                        icon:require('../../assets/downImg/3.png'),
                        title:'我的',
                    },
                ]
            }
        },
        methods:{
            switchToTab(path){
                this.$router.replace(path);
            }
        }
    }
</script>

<style  lang="scss" scoped>
    .active{
        color:#13227a;
        font-weight: bold;
    }
   .downList{
       width: 100%;
       position: absolute;
       height: 10%;
       left: 0;
       bottom: 0;
       border-top: 0.01rem solid #ccc;
       background: #fff;
        ul{
            display: flex;
            li{
                img{
                    margin-top: 0.2rem;
                    width: 0.6rem;
                    height: 0.6rem;
                }
                flex: 1;
                text-align: center;
                a{
                    color: #515151;
                    display: block;
                }
            }
        }
   }
</style>